<template>
	<view>

		<view class="con_position">
			<view class="status_bar">

			</view>
			<u-icon class="icon" name="arrow-left" size="40" @click="Back"></u-icon>
			<view class="con_top">
				<text>寻找</text>
				<text>相似的灵魂终会相遇</text>
			</view>
			<view class="search">
				<u-search v-model="form.keyword" :show-action="true" action-text="搜索" :animation="true"
					bg-color="#f2f3f7" :action-style="actionStyle" @custom="searchBank" @search="searchBank">
					>
				</u-search>
			</view>
			<view>
				<u-tabs-swiper ref="uTabs" :list="listTab" :current="current" @change="tabsChange" :is-scroll="false"
					swiperWidth="750" active-color="#4b5ad9"></u-tabs-swiper>
			</view>
		</view>
		<view style="margin-top: 460rpx;">

			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
				style="height: 1300rpx;">
				<swiper-item class="swiper-item" v-for="(item, index) in listTab" :key="index">
					<scroll-view scroll-y @scrolltolower="onreachBottom">
						<view class="wrap">
							<view class="demo-warter" v-for="(item, index) in flowList" :key="index">
								<view class="demo">
									<!-- <u-avatar :src="item.icon" mode="circle" size="60"></u-avatar> -->
									<u-avatar :src="$url + item.icon" mode="square" size="large"></u-avatar>
									<view class="demo-text">
										<text>
											{{item.nickname}}
										</text>
										<text>ID号:{{item.uuId}}</text>
									</view>
									<view class="demo-bt" @click="addUser(item.id,item)" :style="item.display">
										{{item.add}}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>

				</swiper-item>
			</swiper>
		</view>


	</view>
</template>

<script>
	// import wsRequest from "@/util/websocket.js"
	export default {
		data() {
			return {
				ws: null,
				actionStyle: {
					lineHeight: '34px',
					borderRadius: '10px',
					backgroundColor: '#4b5ad9',
					color: '#fff'
				},
				form: {
					keyword: '',
					page: 0,
					limit: 9,
				},
				msg: {
					fromId: '',
					fromName: '',
					fromIcon: '',
					toId: '',
					toName: '',
					toIcon: '',
					type: '', //区分群聊或一对一聊天等
					msgType: 'text', //消息类型
					content: '',
					sendTime: '',
				},
				users: [],
				flowList: [],
				listTab: [{
					name: '好友'
				}, {
					name: '群组'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			};
		},
		onLoad() {

		},
		beforeDestroy() {

		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onShow() {

			/* 隐藏凸起图标 */
			var icon = plus.nativeObj.View.getViewById("icon");
			setTimeout(function() {
				icon.hide(); 
			}, 100);
		},
		onReachBottom() {
			// 模拟数据加载
			setTimeout(() => {
				this.apiData();
			}, 1000)
		},

		methods: {
			addRandomData() {
				for (let i = 0; i < this.users.length; i++) {
					// this.users[i].add = '添加'
					let item = null;
					this.$set(this.users[i], 'display', 'display: block;');
					if (this.users[i].uuId.localeCompare(uni.getStorageSync('uuId')) == 0) {
						this.users[i].display = 'display: none;';
						item = this.users[i];
						item.id = this.$u.guid();
					} else {
						this.$set(this.users[i], 'add', '关注');
						item = this.users[i];
						item.id = this.$u.guid();
					}
					this.flowList.push(item);
				}
			},
			Back() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			},
			apiData() {
				this.form.page = this.form.page + 1;
				this.$sendRequest({
					url: "/users/select",
					method: 'GET',
					data: this.form,
					success: (res) => {
						this.users = res.data.data
						this.addRandomData();
					}
				})
			},
			searchBank() {
				this.form.page = 0;
				this.flowList.length = 0;
				if (this.form.keyword != null && !this.form.keyword.length == 0) {
					this.apiData()
				}

			},
			addUser(id, item) {
				// //发送数据
				if (item.add.localeCompare("关注") == 0) {
					this.msg.fromId = uni.getStorageSync('uuId');
					this.msg.fromName = uni.getStorageSync('nickname');
					this.msg.fromIcon = uni.getStorageSync('icon');
					this.msg.toId = item.uuId;
					this.msg.toName = item.nickname;
					this.msg.toIcon = item.icon;
					this.msg.type = 'TYPE_ADD'; //区分群聊或一对一聊天等
					this.msg.msgType = 'text'; //消息类型
					this.msg.content = '开始关注你了';
					this.$socket.send(JSON.stringify(this.msg));
					item.add = '已关注'
				}
				// this.addUser= false;
			}
		},

	}
</script>

<style>
	page {
		background-color: #fffffd;
		
	}

	.con_position {
		position: fixed;
		z-index: 999;
		width: 100%;
		background-color: #fffffd;
		top: 0;
	}

	.con_top {
		padding-left: 40rpx;
		margin-bottom: 30rpx;
		display: flex;
		width: 100%;
		height: 100rpx;
	}

	.con_top text:first-child {
		margin-top: 25rpx;
		font-size: 54rpx;
		font-weight: bold;
		font-family: my-font;
		color: #4b5ad9;
	}

	.con_top text:nth-child(2) {
		margin-left: 15rpx;
		margin-top: 60rpx;
		font-size: 32rpx;
		font-family: my-font;
		color: #4b5ad9;
	}

	.icon {
		margin: 20rpx;
		background-color: #fffffd;
		width: 80rpx;
		height: 80rpx;
		padding: 20rpx;
		border-radius: 100rpx;
		box-shadow: 1px 2px 3px 3px rgba(235, 234, 246, 0.9);
	}

	.search {
		margin: 0 auto;
		width: 80%;
		height: 70rpx;
	}

	.wrap {
		margin: 0 auto;
		width: 90%;
		height: 1300rpx;
	}
</style>
<style lang="scss" scoped>
	.demo-warter {
		width: 96%;
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		position: relative;
	}

	.demo {
		padding: 15rpx;
		width: 100%;
		height: 148rpx;
		display: flex;
		flex-direction: row;
		border-radius: 15px;
		background-color: #f2f3f7;
	}

	.u-avatar {
		margin-right: 10rpx;
	}

	.demo-text {
		width: 65%;
		display: flex;
		flex-direction: column;
	}

	.demo-text text:nth-child(1) {
		width: 360rpx;
		overflow: hidden;
		white-space: nowarp;
		text-overflow: ellipsis;
		font-size: 32rpx;
	}

	.demo-text text:nth-child(2) {
		color: #9A9A9A;
		margin-top: 25rpx;
		font-size: 30rpx;
	}

	.demo-bt {
		margin: auto 0;
		padding-top: 8rpx;
		color: #4b5ad9;
		width: 90rpx;
		height: 50rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 8px;
		background-color: #ffffff;
		box-shadow: 1px 2px 3px 3px rgba(235, 234, 246, 0.9);
	}
</style>
